<template>
  <div>
    <a-modal :visible="visible" :footer="null" @cancel="cancelBtn" centered>
      <a-tabs v-model:activeKey="activeKey" v-if="config">
        <a-tab-pane key="1" tab="客服二维码">
          <div class="code">
            <img :src="config.plat_service_qrcode" alt="客服二维码" />
            <div class="mt-20">使用微信扫一扫联系客服</div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="客服电话" style="padding-bottom: 200px">
          <div class="customer">
            客服电话:
            <!-- <WhatsAppOutlined style="color: green;" /> -->
            <div style="fontsize: 30px">
              {{ config.plat_service_phone }}
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script>
import { computed, defineComponent, ref } from "vue";
import store from "../../../../store";
import { PhoneOutlined, WhatsAppOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  name: "",
  components: {
    PhoneOutlined,
    WhatsAppOutlined,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const activeKey = ref("1");
    const config = computed(() => store.getters.basicConfig);
    const cancelBtn = () => {
      context.emit("close");
    };

    return {
      activeKey,
      config,
      cancelBtn,
    };
  },
});
</script>

<style lang="less" scoped>
.code {
  padding: 20px 0;
  text-align: center;
  img {
    width: 200px;
    height: 200px;
  }
}
.customer {
  font-size: 20px;
  // font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
}

:deep(.ant-tabs-nav-wrap) {
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 20px;
}

:deep(.ant-tabs-content) {
  min-height: 282px;
}
</style>
